<template>
  <div>
    {{ color }}
  </div>
</template>

<script>
import { reactive, inject } from 'vue';
export default {
  //provide()和 inject()可以实现嵌套组件之间的数据传递。这两个函数只能在 setup()函数中使用。父级组
  //件中使用 provide()函数向下传递数据；子级组件中使用 inject()获取上层传递过来的数据。
  setup() {
    let state = reactive({
      //调用 inject 函数时，通过指定的数据名称，获取到父级共享的数据
      color: inject('globalColor'),
    });
    return state;
  },
};
</script>
